<template>
    <div class="loan-info-box">
        <x-header slot="header"
                  style="width:100%;height:46px;background-color: #ec6758"
                  title="视频详情"
                  :left-options="{backText: '', preventGoBack:true}"
                  @on-click-back="goBackPage"
        ></x-header>

        <div class="list_liebiao">
            <h4 v-text="title">文章标题</h4>
            <div>
                <span>分享人：<span v-text="shareName"></span></span>
                <span>时间:<span v-text="formatDateTime(modifyTime)"></span></span>
            </div>

            <p v-html="resume" style="display: block">
            </p>
        </div>
        <!--小视频 -->
        <div class="video_class" v-for="item in attach">
            <!--<video-player  class="video-player vjs-custom-skin"-->
                           <!--ref="videoPlayer"-->
                           <!--:playsinline="true"-->
                           <!--:options="playerOptions"-->
            <!--&gt;</video-player>-->
            <video v-if="item.name.split('.')[1] == 'mp4'" :src="item.fullPath"   controls="controls"  ></video>
            <div v-else @click="showModel">
                <a  :href="item.fullPath" download="download"  v-text="item.fullPath" ></a>
            </div>

        </div>
        <!--<div id="videoItem">-->

        <!--</div>-->

        <div>
            <x-dialog @click="showToast=false" v-model="showToast" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '100%', 'background-color': 'transparent'}">

                <img src="../../assets/imgs/shareimg.png" style="max-width:100%">
                <div @click="showToast=false">
                    <span class="vux-close"></span>
                </div>
            </x-dialog>
        </div>
    </div>
</template>

<script>
    /**
     *   视频详情页
     */
    import {
        XHeader,
        XDialog,
        dateFormat

    } from 'vux';
    import 'videojs-flash'
    import SysApi from '../../api/api'

    export default {
        name: 'videoDetails',
        data() {
            return {
                activePageItem: 0, // 激活当前页
                isLastStep: false, // 是否是最后一步
                showToast:false,
                attach: [],
                //videoInfo
                modifyTime: '',
                resume: '',
                title: '',
                shareName: ''
            };
        },
        methods: {
            formatDateTime(date) {
                return dateFormat(date, 'YYYY-MM-DD HH:mm')
            },
            showModel(){
                var ua = navigator.userAgent.toLowerCase();
                if(ua.match(/MicroMessenger/i)=="micromessenger") {
                    this.showToast = true;
                }
            },
            //初始化
            init() {
                let _this = this;
                let data = {
                    id: this.$route.query.id
                };
                SysApi.videoInfo(data).then(
                    res => {
                        console.log(res)
                        this.modifyTime = res.data.modifyTime;
                        this.resume = res.data.resume;
                        this.shareName = res.data.shareName;
                        this.title = res.data.title;
                        if (res.data.attach && res.data.attach.length) {
                            res.data.attach = JSON.parse(res.data.attach);
                        }

                        this.attach = res.data.attach;
                    }, error => {

                    }
                )
            },
            goBackPage() {
                this.$router.push({name:"index/videoList"});
            }
        },
        activated: function () {
//            this.playerOptions.sources = [];
//             document.getElementById("videoItem").innerHTML = "";
            this.attach = [];
            this.showToast = false;
            this.init();
        },
        components: {
            XHeader,
            XDialog,
            dateFormat
        }
    };

</script>

<style lang="less">
    @import "../../style/theme.less";
    @import "../../style/mixin.less";

    .vux-close {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .loan-info-box {
        background-color: @color-background-default;

        .vux-header {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            .vux-header-left {
                .left-arrow:before {
                    border: solid 1px @color-white;
                    border-width: 2px 0 0 2px;
                }
            }
        }
        .progressState div p {
            font-size: @font-size-tiny;
        }
        .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            top: -1px;
            padding-top: 1px;
        }
        .currentStep .weui-wepay-flow__state {
            width: 16px;
            height: 16px;
            padding-top: 1px;
            border: 1px solid @color-primary;
            color: @color-primary;
            border-radius: 50%;
            background-color: @color-white;
        }
        .weui-input {
            height: 28px;
            line-height: 28px;
        }
        .weui-wepay-flow, .weui-wepay-flow-auto {
            padding: 10px 40px 30px;
            background: @color-white;
        }
        .weui-wepay-flow__li_done .weui-wepay-flow__state,
        .weui-wepay-flow__process {
            background-color: @color-primary;
        }
    }

    .vux-search-fixed {
        position: static !important;
    }

    .weui-search-bar__cancel-btn {
        color: #000000;
    }

    .list_liebiao {
        padding: 1rem 1rem 1rem 1rem;
        background: @color-white;
        h4 {
            font-size: @font-size-primary;
            font-weight: normal;
            padding-bottom: 0.3rem;
        }
        div span {
            display: inline-block;
            font-size: @font-size-medium;
            padding-bottom: 0.3rem;
            color: #999;
        }
        div > span:last-child {
            padding-left: 2rem;
        }
        p {
            font-size: @font-size-medium;

        }
    }

    .video_class {
        padding: 1rem;
        video {
            width: 100%;
        }
    }

</style>
